<template>
  <div>
    
    <!-- 右上角 fixed框：官费，服务，总价 -->
    <div class="rMoneyBox padding10 " v-show="rMoneyBox"
      :style="`width:${suoJ?'200px':'50px'}; height:${suoJ?'auto':'50px'};`"
    >
      <div v-show="suoJ">
        <div class="f_16 f_bold  c333 marginB10">{{goodsName}}</div>
        <div class="paddingLR15 c999">
          <div class="f_14 ">
            官费：¥ <span>{{official_fee}}</span>
          </div>
          <div class="f_14 marginB5">
            服务费：¥ <span>{{service_fee}}</span>
          </div>
          <div class="f_16">
            价格：¥ <span class="cRed f_24 f_bold">{{price}}</span>
          </div>
          
          <template v-if="$app.judgeData(order_id)">
            <!-- 调用父级的方法 -->
            <Button type="primary" size="small"  class="marginT10" ghost @click="$parent.backOrSee">
              <Icon type="md-arrow-round-back" size="18" class="relative"  />
              返回
            </Button>
          </template>
        </div>
      
      </div>
      <Icon 
        :type="`${suoJ?'ios-arrow-dropright':'ios-arrow-dropleft-circle'}`"
        size="28"
        class="pointer suoJ "
        :class="`${suoJ?' cCCC':' cBlue'}`"
        @click="suoJ=!suoJ"
      />
    </div>

    

    <Card class="marginB10">
      <div class="overflowH f_14 TJ_big">
        <Modal
          v-model="modal"
          title="专利代理委托书 - 填写说明"
          :footer-hide="true"
          :mask-closable="false"
          class-name="vertical-center-modal"
        >
          <img :src="SMtt" alt />
        </Modal>
        <div class="TJ_title f_bold f_16">基本信息<span class="cRed">*</span></div>
        <div class="TJ_box">
          <div class="cRed marginB20">(输入专利名称，系统自动生成委托书，下载即可。格式：jpg 或 png)</div>
          <div class="marginB20">
            <span class="inlineBlock textRight paddingR10 " style="width:100px;">专利名称：</span>
            <Input
              placeholder="请输入专利名称"
              size="large"
              v-model="zName1"
              ref="zName1"
              clearable
              class="marginR10 SQ_One_R"
              :class="($app.judgeData(orderInfo) && (orderInfo.write_patent_type>0) )?' tempFW ': ' ' "
              :disabled="($app.judgeData(orderInfo) && (orderInfo.write_patent_type>0) )"
            />
            <!-- write_patent_type: 撰写的专利类型, 大于0一定是撰写订单(不一定是代交) -->
            <Button type="primary" class="marginR10" @click="mbDownload">
              <Icon type="md-download" size="16" class="marginR5 relative"/>下载
            </Button>
          </div>

          <div class="marginB20">
            <span class="inlineBlock textRight paddingR10 " style="width:100px;">代理人：</span>
            {{attorney_name_list}}
          </div>
          
          <div class="marginB20">
            <div class="pullLeft textRight paddingR10" style="width:100px;">代理委托书：</div>
            <div class="overflowH " >
              <div class="JC_img tran3 pointer textCenter cBlue pullLeft marginR20 relative overflowH">
                <input type="file" ref="wj" accept="image/*" class="InputFileBox" @change="btnBWT($event)" />
                <div v-show="!$app.getVal_fileUrl(attorney_path)">
                  <Icon type="ios-add-circle-outline" class=" marginB5 " style="padding-top:30px;" size="30"/>
                  <div class="f_12">上传图片</div>
                </div>
                <img :src="$app.getVal_fileUrl(attorney_path)" v-show="$app.getVal_fileUrl(attorney_path)" class="InputShowImg contain bgWhite" />
              </div>
              <div v-show="$app.judgeData($app.getVal_fileUrl(attorney_path))">
                <Button type="primary"  class="marginB10"  size="small" @click="showVsBox=true,jinGao_show=false" style="width:100px">
                  <Icon
                    type="md-photos"
                    size="16"
                    class=" relative"
                  />
                  查看委托书
                </Button>
              </div>
              <Button type="primary" class="marginB5" @click="modal=true" ghost size="small" style="width:100px">
                <Icon
                  type="md-information-circle"
                  size="16"
                  class=" relative"
                />
                文件说明
              </Button>
              <div class="cRed">委托书请严格按照格式上传，<br/>否则会导致提交专利局失败。</div>
            </div>
            
          </div>
          
        </div>
      </div>
    </Card>



    <Modal
      v-model="showVsBox"
      :closable="false"
      :footer-hide="true"
      :mask-closable="false"
      class-name="vertical-center-modal"
      width="450"
    > 
    
        
      <div class="tuPSee marginB10">
        <div class="tipT ac1 " :class=" jinGao_show?' active ':' ' " @click="jinGao_show=true">标准委托书格式</div>
        <div class="tipT ac2 " :class=" !jinGao_show?' active ':' ' "  @click="jinGao_show=false">您上传的委托书</div>
        <div class=" goodTips " :style="'background-image:url('+jinGao+')'" v-show="jinGao_show"></div>
        <img class=" contain pointer relative " style="z-index:5;" height="560" width="406" :src="$app.getVal_fileUrl(attorney_path)" @click="$app.openWindow($app.getVal_fileUrl(attorney_path))" />
      </div>
      
        
      <div class=" overflowH">

        <span class="" v-show="!jinGao_show">
          <i class="iconfont iconicon-1 infinityUpDown cRed"></i>
          点击查看大图
        </span>
        
        <div class="pullRight">
          <Button type="default" class="marginR10 " @click="vongWTx">重新上传</Button>
          <Button type="primary" class=" " @click="showVsBox=false">
            <Icon type="md-checkmark-circle-outline" size="18" class="marginR5 relative" style="top:2px;"/>确 定
          </Button>
        </div>
      
      </div>
      
        
      
    </Modal>

    
  </div>
</template>

<style lang="less" scoped>
.tuPSee{
  border: 1px solid #ccc;
  padding:40px 5px 5px 5px;
  background-color: white;
  position: relative;
  border-color:#5887ef;
  .tipT{
    position: absolute;
    background-color: #f3f3f3;
    width: 150px;
    text-align: center;
    line-height: 30px;
    height:30px;
    font-size: 16px;
    top:0;
    cursor: pointer;
  }
  .tipT.ac1{
    left:0;
  }
  .tipT.ac2{
    left:150px;
  }
  .tipT.active{
    background-color: #5887ef;
    font-weight: bold;
    color:white;
  }

  .goodTips{
    height: 560px;
    width: 406px;
    position: absolute;
    background-color: rgba(255,255,255,0.6);
    z-index: 8;
    -webkit-animation: goodTipT 2s linear;
    animation: goodTipT 2s linear;
  }

  
}

/*外to内 动画*/
@-webkit-keyframes goodTipT{
    0%{background-color: rgba(255,255,255,1);}
    100%{ background-color: rgba(255,255,255,0.6);}
}
@keyframes goodTipT{
    0%{background-color: rgba(255,255,255,1);}
    100%{background-color: rgba(255,255,255,0.6);}
}
</style>

<script>
import jinGao from "@$@/img/jinGao.png";
import SMtt from "@$@/img/wwss.jpg";
export default {
  name: "baseTop",
  components: {},
  data() {
    let data = {
      order_id:'',//订单ID,


      goods_id:'',//商品ID
      zName1: "",// 专利名称
      attorney_name_list:'',//被委托人
      attorney_path:{
        file_url:'',//前端展示路径
        file_path:'',//上传给后台的路径

        //批过章的
        file_url1:'',
        file_path1:''

      },// 代理委托书

      goodsName:'',
      official_fee:0,//官费
      service_fee:0,//服务费
      price:0,//总价
    };

    let tool={
      //价格框
      rMoneyBox:false,

      // 提示框纯粹 展示看看
      SMtt,
      modal: false,

      //委托书查看-对比框框
      showVsBox:false,
      jinGao,
      jinGao_show:true,

      suoJ:true//右上角浮动框：true显示，false隐藏
    };
    return Object.assign(data, tool);
    
  },
  props:['type','orderInfo'],
  mounted() {
    
    let {type}=this;

    // 这个要单独拿出来判断
    $ajax.bigSetting(resData=>{
      // 委托人赋值
      this.attorney_name_list=resData.patent_attorney.name;
    });

    if($app.judgeData(type)){//没有 新建订单
      //获取商品ID
      $ajax.gList(type, resData => {
        if($app.judgeData(resData)){

          this.rMoneyBox=true;//显示价格框
          

          let {
            $route:{
              query:{
                type,
                goodsId,
                order_id
              }
            }
          }=this;
          // console.log('焰 = ',type,goodsId);

          let xuOK=0;
          if($app.judgeData(goodsId)){
            resData.forEach((val,i)=>{
              if(goodsId==val.id){
                xuOK=i
              }
            });
          }

          if($app.judgeData(order_id)){
            //父级传值过来
          }else{
            this.goodsName=resData[xuOK].name;
          }
          

          this.goods_id=resData[xuOK].id;
          this.official_fee=parseFloat(resData[xuOK].official_fee);
          this.service_fee=parseFloat(resData[xuOK].service_fee);
          this.price=parseFloat(resData[xuOK].price);

          
        }else{
          $app.alert(`type = ${type}，后台没有返回 商品ID，无法操作`,'接口地址 = goods/list');
        }
      });
    }
    
  },
  methods: {
    mbDownload() {//模板下载
      let { zName1 } = this;
      if ($app.delSpace(zName1)) {
        $ajax.dPatentAttorney(zName1,resData=>{
          let url=resData.file_url;
          $app.openWindow(url);
        })
      } else {
        this.$Message.error({ content: "专利名称不能为空" });
        this.$refs["zName1"].focus();
        this.zName1='';
      }
    },
    //上传委托书
    btnBWT(e){
      let file = e.target.files[0];//选中的文件

      //格式判断
      $app.suffix.jpgPng(e,file,false,()=>{
        $app.selectFileImage(null,null,file,13,resData=>{
          this.attorney_path=resData;
          this.showVsBox=true;
          this.$refs['wj'].value='';//清空input file的值
        },()=>{
          this.$refs['wj'].value='';//清空input file的值
        });
      });
      

    },
    vongWTx(){
      this.$refs['wj'].dispatchEvent(new MouseEvent('click'))
    }
  }
};
</script>

